<template>
    <div class="product">
        <div class="header">
            <div class="big-image">
                <img src="../../assets/img/product-big-image.png" alt="">
            </div>
            <button @click="downApp">立即下载</button>
        </div>
        <div class="application-recommendation">
            <header>
                <span></span>
                <h2>精选应用推荐</h2>
            </header>
            <div class="text">
                <p>不被淹没在海量应用里</p>
                <p>好看、好玩、好用的APP尽聚于此！</p>
            </div>
            <div class="image">
                <img src="../../assets/img/application-recommendation.png" alt="">
            </div>
        </div>
        <div class="game">
            <header>
                <span></span>
                <h2>精选应用推荐</h2>
            </header>
            <div class="text">
                <p>不用再烦恼没游戏玩</p>
                <p>各种各样游戏陪你疯</p>
            </div>
            <div class="image">
                <img src="../../assets/img/game.png" alt="">
            </div>
        </div>
        <div class="fiction">
            <header>
                <span></span>
                <h2>海量热门小说在线看</h2>
            </header>
            <div class="text">
                <p>百万书友在线讨论剧情，一起吐槽八卦</p>
                <p>好看、好说、好畅快</p>
            </div>
            <div class="image" @click="right_shows">
                <img src="../../assets/img/fiction.png" alt="">
            </div>
            <transition name="right-move">
                <div class="danmu-1" v-show="right_show"><img src="../../assets/img/danmu-1.png" alt=""></div>
            </transition>
            <transition name="right-move-1">
                    <div class="danmu-2"  v-show="right_show"><img src="../../assets/img/danmu-2.png" alt=""></div>
            </transition>
            <transition name="right-move-2">
                <div class="danmu-3"  v-show="right_show"><img src="../../assets/img/danmu-3.png" alt=""></div>
            </transition>
            <transition name="right-move-3">
                    <div class="danmu-4"  v-show="right_show"><img src="../../assets/img/danmu-4.png" alt=""></div>
            </transition>
        </div>
        <div class="top" v-show="backToTop">
            <a href="#"></a>
        </div>
        <div class="footer">
            <div class="image">
                <img src="../../assets/img/product-footer.png" alt="">
            </div>
            <div class="text">
                <p>Copyright © 2016-2018 指尖互动 All Rights Reserved | </p>
                <a href="http://www.miitbeian.gov.cn/" target="_blank">闽ICP备16031728号-1</a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Product',
    data () {
        return {
            right_show: false,
            scrollTop: 0,
            backToTop: false
        }
    },
    methods: {
        downApp () {
            let u = navigator.userAgent, app = navigator.appVersion;
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; 
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (isAndroid) {
                    window.location = 'http://androidfilecdn.tuling99.com/android/manual/com.finger.easytool/com.finger.easytool_1.4_10000.apk'
                }
                else if (isIOS) {
                    window.location = 'https://itunes.apple.com/cn/app/id1196217120?l=zh&ls=1&mt=8'　　　　
                }
        },
        backToTops () {
            this.scrollTop = window.scrollY
            if (this.scrollTop >= 800) {
                this.backToTop = true
                return
            }
            else {
                this.backToTop = false
            }
        },
        right_shows () {
            this.right_show = !this.right_show
        },
        cleanScrollTop () {
            this.scrollTop = window.scrollY
            if (this.scrollTop >= 3521) {
                this.right_shows()
            }
        }
    },
    mounted () {
        window.addEventListener('scroll',this.cleanScrollTop)
        setInterval(this.right_shows, 14000)
        window.addEventListener('scroll',this.backToTops)
        
    },
    updated () {
        if (this.right_show == false) {
            this.right_show = !this.right_show
        }
        if (this.scrollTop >= 3521) {
            window.removeEventListener('scroll',this.cleanScrollTop)
        }
    }
}
</script>
<style scoped>
.product {
    width: 100%;
}
.product .header {
    position: relative;
}
.product .header .big-image {
    width: 100%;
}
.product .header .big-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.product .header button {
    position: absolute;
    bottom: 9%;
    left: 31%;
    width: 280px;
    height: 80px;
    border-radius: 30px; /*no*/
    border: 3px solid #fff; /*no*/
    background-color: transparent;
    font-size: 36px; /*px*/
    color: #fff;
}
.product .application-recommendation {
    margin-top: 100px;
}
.product .application-recommendation header,.product .game header,.product .fiction header {
    text-align: center;
}
.product .application-recommendation header span,.product .game header span,.product .fiction header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.product .application-recommendation header h2,.product .game header h2,.product .fiction header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top: 20px;
}
.product .application-recommendation .text,.product .game .text,.product .fiction .text {
    text-align: center;
    font-size: 26px; /*px*/
    color: #708090;
    margin-top: 40px;
    line-height: 40px;
}
.product .application-recommendation .image {
    width: 670px;
    height: 618px;
    margin: 60px auto 0;
}
.product .application-recommendation .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.product .game {
    margin-top: 150px;
}
.product .game .image {
    width: 474px;
    height: 618px;
    margin: 60px auto 0;
}
.product .game .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.product .fiction {
    margin-top: 150px;
    position: relative;
    overflow: hidden;
}
.product .fiction .image {
    width: 326px;
    height: 618px;
    margin: 60px auto 0;
}
.product .fiction .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.product .fiction .danmu-1 {
    width: 391px;
    height: 60px;
    margin-top: 60px;
    position: absolute;
    top: 20%;
    right: -410px;
}
.product .fiction .danmu-2 {
    width: 331px;
    height: 60px;
    position: absolute;
    top: 40%;
    right: -410px;
}
.product .fiction .danmu-3 {
    width: 300px;
    height: 60px;
    position: absolute;
    top: 60%;
    right: -410px;
}
.product .fiction .danmu-4 {
    width: 231px;
    height: 60px;
    position: absolute;
    top: 80%;
    right: -410px;
}
.product .fiction .danmu-1 img,.product .fiction .danmu-2 img,.product .fiction .danmu-3 img,.product .fiction .danmu-4 img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.right-move-enter-active {
    animation: right_move 12s linear infinite both;
} 
.right-move-enter-to {
    right: -410px;
}
.right-move-1-enter-active {
    animation: right_move 12s ease-out infinite both;
} 
.right-move-1-enter-to {
    right: -410px;
}
.right-move-2-enter-active {
    animation: right_move 12s ease-in infinite both;
} 
.right-move-2-enter-to {
    right: -410px;
}
.right-move-3-enter-active {
    animation: right_move 12s ease-in-out infinite both;
} 
.right-move-3-enter-to {
    right: -410px;
}
@keyframes right_move {
    from {
        right: -410px;
    }
    to {
        right: 760px;
    }
}
.product .footer {
    margin-top: 150px;
    text-align: center;
}
.product .footer .image {
    width: 90px;
    height: 90px;
    display: inline-block;
}
.product .footer .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.product .footer .text {
    margin: 40px auto 40px;
    display: flex;
    justify-content: center;
}
.product .footer .text p {
    font-size: 18px; /*px*/
    color: #708090;
    display: inline-block;
}
.product .footer .text a {
    text-decoration: none;
    color: #708090;
    font-size: 18px; /*px*/
    display: inline-block;
}
.product .top {
    width: 64px;
    height: 64px;
    position: fixed;
    right: 10px;
    top: 800px;
    z-index: 1;
}
.product .top a {
    display: inline-block;
    background: url("../../assets/img/top.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 64px;
}
@media screen and (max-width: 640px) {
.product .footer .text p {
    font-size: 16px; /*px*/
}
.product .footer .text a {
    font-size: 16px; /*px*/
}    
}
</style>
